<template>
    <div class="login_content">
        <div class="login_box">
            <div class="touxiang">
                <img src="../assets/logo.png">
            </div>
            <!--   表单区域   -->
            <el-form label-width="90px" :model="form" :rules="rules" ref="formData">
                <el-form-item label="用户名称:" prop="username">
                    <el-input prefix-icon="el-icon-ice-tea" v-model="form.username"></el-input>
                </el-form-item>
                <el-form-item label="用户密码:" prop="password">
                    <el-input prefix-icon="el-icon-grape" type="password" v-model="form.password"></el-input>
                </el-form-item>
            </el-form>
            <!--   按钮区域   -->
            <el-button type="primary">取消</el-button>
            <el-button type="success" @click="login">登录</el-button>
        </div>
    </div>
</template>

<script>
    export default {
        name: "login",
        data() {
            return {
                form: {
                    username: "admin",
                    password: "123456",
                },
                //表单验证规则
                rules: {
                    username: [
                        {required: true, message: '请输入活动名称', trigger: 'blur'},
                        {min: 5, max: 10, message: '长度在 5 到 10 个字符', trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: '请输入活动名称', trigger: 'blur'},
                        {min: 6, max: 16, message: '长度在 6 到 16 个字符', trigger: 'blur'}
                    ],
                }
            }
        },

        methods: {
            login() {
                this.$refs.formData.validate(value => {
                    console.log(value)
                    if (!value) {
                        console.log("验证不通过，不能发送请求")
                    } else {
                        this.loginFunc()
                    }
                })
            },

            loginFunc() {
                var that = this
                this.$axios.post('http://127.0.0.1:80/sales/login/', {
                    username: this.form.username,
                    password: this.form.password
                }).then(function (response) {

                    debugger
                    console.log(response)
                    // that.sessionStorage.setItem("username", 12345)
                    // console.log("通过验证，跳转登录")
                    that.$router.push({name: 'home'})
                    that.$message("登录成功...")


                }).catch(function (error) {
                    console.log(error);
                });
            }
        }
    }
</script>

<style scoped>
    .login_content {
        background-color: #2b4b6b;
        height: 100%;
    }

    .login_box {
        width: 450px;
        height: 300px;
        background-color: #fff;
        border-radius: 3px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    .touxiang {
        height: 130px;
        width: 130px;
        border: 1px solid #eee;
        border-radius: 50%;
        padding: 10px;
        box-shadow: 0 0 10px #eee;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -150%);
        background-color: #fff;
    }

    .touxiang > img {
        height: 130px;
        width: 130px;
        border: 1px solid #eee;
        border-radius: 50%;
        background-color: #eee;

    }

    .el-form {
        margin-top: 100px;
    }

    .el-form > el-form-item > el-input {
        margin-left: 20px;
    }

    .el-button {
        float: right;
        margin-right: 20px;
        width: 100px;
    }

</style>